@import "../vars";

.tag-list {
  display: flex;
  span {
    font-size: $--tag-font-size;
    font-variant: tabular-nums;
    height: 32px;
    line-height: 30px;
    box-sizing: border-box;
    list-style: none;
    display: inline-block;
    border-radius: $--tag-border-radius;
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
    opacity: 1;
    margin-right: 8px;
    cursor: pointer;
    white-space: nowrap;
    padding: $--tag-padding;
    border: 1px solid $--tag-info-border;
    background-color: $--tag-info-fill;
    color: $--tag-info-color;
    margin-bottom: 10px;
    &.checkable {
      //background-color: transparent;
      border-color: transparent;
      &-all {
        display: table;
      }
      &--medium {
        height: 28px;
        line-height: 26px;
      }
      &--small {
        height: 24px;
        padding: 0 8px;
        line-height: 22px;
      }
      &--mini {
        height: 20px;
        padding: 0 5px;
        line-height: 19px;
      }
      &:hover {
        color: $--color-primary-light-1;
      }
      &.is-disabled {
        color: $--disabled-color-base;
        cursor: not-allowed;
        background-color: $--disabled-fill-base;
        border-color: $--disabled-border-base;
        box-shadow: none;
      }
    }
    &.expandable-button {
      display: table;
      margin-bottom: 0;
      user-select: none;
      margin-left: 5px;
      border-color: transparent;
      background-color: transparent;
    }
    &.tag-checkable {
      background-color: $--color-primary !important;
      color: $--color-white !important;
      &.is-disabled {
        background-color: $--color-primary-light-6 !important;
      }
    }
  }
  &-option {
    &.expand-retract {
      overflow: hidden;
      display: flex;
    }
  }
}
